<template>
    <div class="record">
        <van-nav-bar :title="$t('my.invite_record')" leftArrow @click-left="_return"/>
        <div class="recordMain">
            <div class="tips clearfix">
                <p>{{$t('info.invitePeo')}}  <span class="rightspan">{{list.length}}人</span></p>
                <!-- <p>{{$t('info.nine')}}：{{address.junum}}</p>
                <p>OECV：{{address.youxiao}}</p> -->
            </div>
            <ul>
                <li v-for="item in list">
                    <van-row type="flex" justify="space-between" align="center">
                        <van-col>
                            <p>{{item.invite_code}}</p>
                            <span>{{item.add_time}}</span>
                        </van-col>
                        <van-col>
                            <button>{{item.status}}</button>
                        </van-col>
                    </van-row>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import moment from 'moment'
    export default {
        data() {
            return {
                list:[],
                address:{}
            }
        },
        methods: {
            _return(){
                this.$emit('_return')
            },
            getData(){
                this.$api.post('user/invrecord')
                    .then(res =>{
                        this.list = res.detail
                        this.list.map(i =>{
                            i.add_time = moment(i.add_time*1000).format('YYYY-MM-DD')
                            Number(i.status) === 1 ? i.status = this.$t('common.state_two') : i.status = this.$t('common.state_one')
                        })
                    })
                this.$api.post('user/invitation')
                    .then(res =>{
                        console.log(res.detail)
                        this.address = res.detail
                    })
            }
        },
        created() {
            this.getData()
        },
        mounted() {
            this.$emit('disappear')
        },
    }
</script>

<style lang="stylus" scoped>
    [class*=van-hairline]::after{
        border: none;
    }
    .rightspan
        float right
    .recordMain
        width 94%
        margin 0 auto
        .tips
            background:linear-gradient(90deg,#53d9b5,#2bc299);
            border-radius 5px
            padding:15px
            margin-bottom 10px
            color #313131
            &:last-child
                border-bottom none
            p
                color #313131
                text-align left
                margin-top 0px
                line-height 28px
                font-size 16px
                float left
                margin-right 20px
                width 100%
        li
            border-radius 5px
            padding:15px
            margin-bottom 10px
            border-bottom 1px solid #ebebeb
            p
                color #23ba92
                font-size 20px
            span
                color #2c2c2c
                font-size 10px
            button
                border 1px solid #22a281
                color: #fff;
                background none
                border-radius 25px
                font-size 10px
                color #22a281
                padding 8px 20px

</style>